<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>鼓励金购买二维码</title>
		<link rel="stylesheet" href="__AGENT__/css/style.css" />
		<link rel="stylesheet" href="__AGENT__/css/iconfont.css" />
		<link rel="stylesheet" href="__AGENT__/css/css.css" />
		<style type="text/css">
			.payment_erweima canvas{width: 180px; height: 180px;}
			body {overflow:scroll; overflow-y:hidden;}
			.pclerk,.pclerk1{position: relative;}
			.pclerk .num{position: absolute; left: 44%; top: 0; right: 24%; font-size: 1.3rem; line-height: normal; color: white;}
			.huiyzm_eimabox{background: url(__AGENT__/img/huiyuanzm03.jpg) no-repeat; background-size: 100% 100%; height: 230px; padding: 15px 0;}
			.payment_erweima{width: 200px; height: 200px; background: white; margin: 0 auto; padding: 10px;}
			.pclerk1 .num{position: absolute; left: 57%; top: 1rem; right: 27%; font-family: impact; font-size: 2.3rem; text-align: center; color: #108E2F; line-height: normal;}
			@media only screen and (min-width: 320px){.payment_erweima canvas{width: 100px; height: 100px;}.payment_erweima{width: 100px; height: 100px;}.huiyzm_eimabox{height: 115px; padding: 7px 0;}}
			@media only screen and (min-width: 369px){.payment_erweima canvas{width: 115px; height: 115px;}.payment_erweima{width: 115px; height: 115px;}.huiyzm_eimabox{height: 133px; padding: 7px 0;}}
			@media only screen and (min-width: 600px){.payment_erweima canvas{width: 200px; height: 200px;}.payment_erweima{width: 200px; height: 200px;}.huiyzm_eimabox{height: 230px; padding: 15px 0;}.pclerk1 .num{font-size: 3.2rem;}.pclerk .num{top: .4rem;}}
			.down_btn{
				width: 87%;
				height: 2rem;
				background: #1DAA39; 
				text-align: center;
				font-size: 1.1rem;
				margin: 0 auto;
				color: white;
				margin-bottom: 10px;
				margin-top: 20px;
			}
			.huiyzm_conbox{
				width: 87%;
				margin: 0 auto;
			}
			.erweima_con, .saoml_con, .xsaoml_con{
			    width: 415px
			}
		</style>
	</head>
	<body>		
		<div class="down_btn" onclick="savepic()">点击保存图片</div>
		<div class="erweima_con" id='payment_conbox'>
			<div class="huiyzm_conbox" >
				<div><img src="__AGENT__/img/huiyuanzm01.jpg?1=1"></div>
				<div class="pclerk">
					<span><img src="__AGENT__/img/huiyuanzm02.jpg"></span>
					<span class="num">{$clerk['id']}</span>
				</div>
				<div class="huiyzm_eimabox" style="">						
					<div class="payment_erweima"  >
						<div id="qrcode" ></div>
					</div>
				</div>
				<div><img src="__AGENT__/img/huiyuanzm04.jpg"></div>
				<div  class="pclerk1">
					<span><img src="__AGENT__/img/huiyuanzm05.jpg"></span>
					<span class="num">{$agent_info['ad_score']}</span>
				</div>
				<div><img src="__AGENT__/img/huiyuanzm06.jpg"></div>
			</div>
			
		
		</div>
		<div id ='cut_img'></div>
		
	</body>
</html>
<script type="text/javascript" src="__PUBLIC__/static/js/jquery.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/static/layui/layui.all.js"></script>
<script type="text/javascript" src="__PUBLIC__/static/js/jquery.form.js"></script>
<script type="text/javascript" src="__PUBLIC__/static/js/jquery.qrcode.js"></script>
<script type="text/javascript" src="__PUBLIC__/static/js/utf.js"></script>
<script type="text/javascript" src="__PUBLIC__/static/js/zepto-1.1.6.min.js"></script>
<script type="text/javascript" src='__PUBLIC__/static/js/html2canvas.js'></script>
<script>
	var index = layer.load(0, {shade: false,time: 2 * 1000});
	$(".layui-layer-loading").css("left", "50%");
	var url = "{$agent_info.code_url}";
	var img = "{$agent_info.logo}";
	 $("#qrcode").qrcode({
        render 		: "canvas",    		//设置渲染方式，有table和canvas，使用canvas方式渲染性能相对来说比较好
        text 		: url,    		//扫描二维码后显示的内容,可以直接填一个网址，扫描二维码后自动跳向该链接
        width 		: "117",    	//二维码的宽度
        height 		: "117",    	//二维码的高度
        background 	: "#ffffff",    //二维码的后景色
        foreground 	: "#000000",    //二维码的前景色
    });
</script>
<script>
//下载图片
function savepic() {
	html2canvas($("#payment_conbox"), {
		onrendered: function (canvas) {
		    var url = canvas.toDataURL(); //base64数据
		    var image = new Image();
		    image.src = url;
		    image.id = 'div_img';
		    $('#cut_img').append(image);
		    var img_src = $('#div_img')[0].src;
				var type = 'png';
				// 下载后的问题名
				var filename = 'pic_' + (new Date()).getTime() + '.' + type;
				// download
				saveFile(img_src,filename);
		   }
		});
}

/**
 * 在本地进行文件保存
 */
var saveFile = function(data, filename){
    var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
    save_link.href = data;
    save_link.download = filename;
   
    var event = document.createEvent('MouseEvents');
    event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    save_link.dispatchEvent(event);
};
</script>
